<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高德地图 - 地址搜索</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }
        #container {
            height: 100vh;
            display: flex;
        }
        #map {
            width: 75%;
            height: 100%;
        }
        #search-container {
            width: 25%;
            padding: 20px;
            background-color: #f4f4f4;
        }
        #search-box {
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
        }
        #address-info {
            padding: 10px;
            background-color: white;
            border: 1px solid #ddd;
        }
        #loading {
            display: none;
            color: #007bff;
        }
    </style>
    <script src="https://webapi.amap.com/maps?v=2.0&key=57777ddb2ac19b71f97f442f0519a1f1"></script>
</head>
<body>

<div id="container">
    <!-- 地图容器 -->
    <div id="map"></div>

    <!-- 搜索框和地址信息展示 -->
    <div id="search-container">
        <input type="text" id="search-box" placeholder="请输入结构化地址">
        <button id="search-btn">查询地址信息</button>
        <div id="loading">加载中...</div>
        <div id="address-info">
            <p>地址详细信息：</p>
            <pre id="details"></pre>
        </div>
    </div>
</div>

<script>
    // 初始化地图
    var map = new AMap.Map('map', {
        resizeEnable: true,
        center: [116.397428, 39.90923], // 初始中心点，北京的经纬度
        zoom: 13
    });

    // 查询结构化地址并显示详细信息
    function searchAddressInfo(address) {
        document.getElementById('loading').style.display = 'block'; // 显示加载提示

        // 修改为调用地理编码 API 的 URL
        var url = `https://restapi.amap.com/v3/geocode/geo?key=0f6b9bc56d76afa89847e1fa688a0eb9&address=${encodeURIComponent(address)}&output=JSON`;

        fetch(url)
            .then(response => response.json())
            .then(data => {
                document.getElementById('loading').style.display = 'none'; // 隐藏加载提示

                if (data.status === '1' && data.geocodes.length > 0) {
                    var location = data.geocodes[0]; // 获取第一个匹配的地理编码结果

                } else {
                    alert('未找到相关地址信息');
                }
            })
            .catch(error => {
                document.getElementById('loading').style.display = 'none'; // 隐藏加载提示
                alert('请求失败，请稍后再试');
            });
    }

    // 提交按钮事件监听
    document.getElementById('search-btn').addEventListener('click', function() {
        var address = document.getElementById('search-box').value;
        if (address) {
            searchAddressInfo(address); // 查询结构化地址的详细信息
        } else {
            alert('请输入地址');
        }
    });
</script>

</body>
</html>
